<template>
    <div class="storageType">
        <van-nav-bar title="操作类型" left-arrow @click-left="handleLeft">
        </van-nav-bar>
        <div v-for="(item, index) in storageTypeList" :key="index" @click="storageTypeClcik(index)"
            :class="storageTypeIndex == index ? 'storageType_item_active' : 'storageType_item'">
            {{ item }}
            <van-image :src="xuanzhong" v-if="storageTypeIndex == index"></van-image>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const xuanzhong = new URL("@/assets/productHome/icon_xuanzhong.png", import.meta.url).href;
const storageTypeList = ref([
    '库存盘点',
    '商品调拨',
])
const storageTypeIndex = ref()
const storageTypeClcik = (index: number) => {
    storageTypeIndex.value = index
    // 商品调拨
    if (index == 1) {
        router.push({
            path: '/allocation',
        })
        // 库存盘点
    } else if (index == 0) {
        router.push('/inventoryCommodity')
    }
}
/** 回退 */
const handleLeft = () => {
    router.push('/productHome')
}
</script>
<style lang="less" scoped>
.storageType {
    height: calc(100vh - 90px);
    width: 100%;
    background-color: #fff;

    .van-image {
        width: 15px;
        height: 15px;
    }

    .storageType_item {
        width: 100%;
        height: 56px;
        box-sizing: border-box;
        padding: 0 15px;
        background-color: #fff;
        font-weight: 400;
        font-size: 16px;
        color: #1A1B1C;
        line-height: 56px;
    }

    .storageType_item_active {
        width: 100%;
        height: 56px;
        box-sizing: border-box;
        padding: 0 15px;
        background: #F6FAFF;
        font-weight: 400;
        font-size: 16px;
        color: #0094FF;
        line-height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>